<template>
  <PageLayout class="form-container">
    <div class="form-title">{{ route.query.id ? "编辑" : "新增" }}账号</div>
    <div class="form-box w-800">
      <a-form
        :model="formState"
        :rules="rules"
        ref="formRef"
        layout="Vertical"
        :labelCol="{ style: { width: '130px' } }"
      >
        <div class="cont-title">基本信息</div>
        <a-form-item label="用户名/姓名" name="nickname" required>
          <a-input
            v-model:value="formState.nickname"
            placeholder="请输入用户名/姓名"
            :maxlength="50"
          />
        </a-form-item>
        <a-form-item label="账号/邮箱" name="username" required>
          <a-input
            v-model:value="formState.username"
            placeholder="请输入账号/邮箱"
            :maxlength="50"
          />
        </a-form-item>
        <a-form-item label="部门" name="deptId" required>
          <a-select
            v-model:value="formState.deptId"
            placeholder="请选择部门"
            :options="deptOptions"
          />
        </a-form-item>
        <a-form-item label="职位" name="jobId">
          <a-select
            v-model:value="formState.jobId"
            placeholder="请选择职位"
            :options="jobOptions"
          />
        </a-form-item>
        <a-form-item label="备注">
          <a-textarea
            v-model:value="formState.remark"
            placeholder="请输入"
            :options="options"
            :maxlength="300"
          />
        </a-form-item>
        <a-form-item
          :labelCol="{ style: { width: '180px' } }"
          label="国际事业部人员负责区域"
          name="regionCodes"
          required
        >
          <a-checkbox-group
            v-model:value="formState.regionCodes"
            :options="areaOptions"
          />
        </a-form-item>
        <div class="cont-title">权限设置</div>
        <a-form-item label="" name="menuIds" required>
          <a-tree
            v-model:checkedKeys="formState.menuIds"
            checkable
            :tree-data="treeData"
            :fieldNames="{
              children: 'childrenList',
              title: 'menuName',
              key: 'id',
            }"
          >
          </a-tree>
        </a-form-item>

        <a-col :span="24">
          <a-form-item class="btn-box" style="margin-left: 80px">
            <a-button @click="router.go(-1)">返回</a-button>
            <a-button type="primary" @click="save">保存</a-button>
          </a-form-item>
        </a-col>
      </a-form>
    </div>
  </PageLayout>
</template>

<script setup>
import {
  postUserAdd,
  postUserUpdate,
  postMenuTreeList,
  postUserDetail,
} from "@/api/system";
import { useStoreCommonEnum } from "@/store";
import { message } from "ant-design-vue";
import { onMounted } from "vue";
const storeCommonEnum = useStoreCommonEnum();

const route = useRoute();
const router = useRouter();
const formRef = ref(null);

const formState = reactive({
  id: "",
  nickname: "",
  username: "",
  deptId: undefined,
  jobId: undefined,
  remark: "",
  menuIds: undefined,
  regionCodes: undefined,
});
const areaOptions = ref([
  { label: "俄语区", value: "1" },
  { label: "非洲区", value: "2" },
  { label: "亚太区", value: "3" },
  { label: "欧洲区", value: "4" },
  { label: "中东区", value: "5" },
  { label: "拉美区", value: "6" },
]);
const treeData = ref([]);
const deptOptions = ref([]);
const jobOptions = ref([]);

onMounted(async () => {
  deptOptions.value = await storeCommonEnum.getCommonEnum("department");
  jobOptions.value = await storeCommonEnum.getCommonEnum("job");
  postMenuTreeList().then((res) => {
    treeData.value = res.data;
  });
  if (route.query.id) {
    postUserDetail({ id: route.query.id }).then((res) => {
      for (let key in formState) {
        formState[key] = res.data[key];
      }
    });
  }
});

const rules = {
  nickname: [{ required: true, message: "请输入用户名/姓名", trigger: "blur" }],
  username: [{ required: true, message: "请输入账号/邮箱", trigger: "blur" }],
  deptId: [{ required: true, message: "请选择部门", trigger: "blur" }],
  regionCodes: [{ required: true, message: "请选择国际事业部人员负责区域" }],
};

const save = () => {
  formRef.value.validate().then(() => {
    const requestUrl = formState.id ? postUserUpdate : postUserAdd;
    requestUrl({ ...formState }).then(() => {
      message.success(formState.id ? "编辑成功" : "新增成功");
      router.go(-1);
    });
  });
};
</script>

<style lang="less" scoped>
.btn-box {
  margin-top: 24px;
  margin-left: 130px;
  :deep(.ant-btn) {
    margin-right: 16px;
  }
}
</style>
